<template>
  <div class="future-weather">
    <div class="weather-header">
      <h3 class="location-title">{{ locationName }}未来24小时天气</h3>
      <div class="update-time">最后更新时间: {{ updateTime }}</div>
    </div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
import dayjs from "dayjs";
import { KEY,API_24H } from "@/common/constrant";
import { mapState } from "vuex";

export default{
  data(){
    return{
      hourly:[],
      hourWeatherData:{
        fxTime:[],
        temp:[],
      },
      updateTime:""
    };
  },
  computed:{
    // location:function(){
    //   return this.$store.state.location.id
    // }
    ...mapState({
      location: state => state.location,
    }),
    locationName() {
      return this.location?.name || '未知地点';
    }
  },
  methods:{
    getData(){
      if (!this.location?.id) {
        console.warn('Location ID not available');
        return;
      }

      axios
        .get(API_24H,{
          params:{
            location:this.location.id,
            key:KEY,
          },
        })
        .then((res)=> {
          console.log(res.data);
          this.hourly = res.data.hourly;
          this.updateTime = dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss")
          //this.$set(this, 'updateTime', dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss"));
          this.hourWeatherData.fxTime = [];
          this.hourWeatherData.temp = [];
          this.hourly.forEach(element => {
            this.hourWeatherData.fxTime.push(element.fxTime)
            this.hourWeatherData.temp.push(element.temp)
          });
           let fxTime = [];
           this.hourWeatherData.fxTime.forEach(element => {
            fxTime.push(dayjs(element).format("HH"));
            });
            console.log("------------" + fxTime);
            this.initChart(fxTime, this.hourWeatherData.temp);
          this.initChart(
            this.hourWeatherData.fxTime.map((element)=>
              dayjs(element).format("HH")
            ),
            this.hourWeatherData.temp
          );
        })
        .catch(error => {
          console.error('Error fetching weather data:', error);
        });
    },
    initChart(xAxisData,seriesData){
      var chartDom = this.$refs.chartContainer;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    if (this.location?.id) {
      this.getData();
    }
  },
  watch: {
    'location.id': {
      handler(newVal) {
        if (newVal) {
          this.getData();
        }
      },
      immediate: true
    }
  },
  
};

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.future-weather {
  padding: 20px;
}

.weather-header {
  text-align: center;
  margin-bottom: 20px;
}

.location-title {
  font-size: 1.5em;
  color: #333;
  margin: 0 0 10px 0;
}

.update-time {
  color: #666;
  font-size: 0.9em;
}

.chart-container {
  height: 20rem;
}

@media (max-width: 768px) {
  .location-title {
    font-size: 1.2em;
  }
  
  /* .update-time {
    font-size: 0.8em;
  } */
}
</style>
